<template>
  <div id="newpower-wrp">
    <user-header></user-header>
    <div class="newpower-cont">
      <div class="newpower-from-wrp">
        <h1 class="newempower">新增授权</h1>
        <el-form ref="form"   label-width="100px">
          <el-form-item label="授权IP">
            <span id="" class="span" red>*</span>
            <el-select v-model="form.sqIp"  @change="handleChangebsqList" class="g" placeholder="请选择活动区域">
              <el-option  class="clear" label="请选择授权IP" value="请选择授权IP" ></el-option>
              <el-option v-for="item in currentsqList" class="cc" :label="item.opusName" :key="item.opusId" :value="item.opusName"></el-option>
            </el-select>
          </el-form-item>
          <!-- 被授权商 -->
          <el-form-item label="被授权商">
            <span id="" class="span">*</span>
            <input class="inp" v-model="form.bsqIp"  type="text" /><label class="newpower-lab"  for="">从已有被授权商中选择</label>
            <!-- 下拉框 -->
            <el-select  v-model="form.bsqIp" @change="handleChangebsqList()"  class="g g-ele-inp" placeholder="请选择活动区域">
            <el-option label="请选择被授权商" class="g0" value="请选择被授权商" ></el-option>
            <el-option v-for="item in  currentbsqList" :label="item.merchantName" :key="item.merchantId" :value="item.merchantName"></el-option>
            </el-select>
          </el-form-item>
          <!-- 授权领域 -->
          <el-form-item label="授权领域">
            <span id="" class="span">*</span>
            <label class="power-are"  for="">添加授权领域</label>
          </el-form-item>
          <!-- 授权领域 第二行-->
          <el-form-item  v-for="(item , index) in sqLy.length" :key="item" label="">
            <span style="margin:0 0 0 26px" class="span"></span>
            <el-select  v-model="sqLy[item-1].value"   class="g"  placeholder="请选择授权领域">
              <el-option label="请选择授权领域" class="g1" value="请选择授权领域"></el-option>
              <el-option  v-for="items in currentsqLy"  :label="items.value" :value="items.value" :key="items.id" ></el-option>
            </el-select>
              <input type="text" v-model="sqLy[item-1].valueMess" class="newpower-label"  placeholder="请填写具体的应用形式，如：笔记本封面，以最大化保证您的权益." name="" id="" value="" />
              <i class="el-icon-circle-close po-icon" v-show="index > 0" @click="handleRed(index)"></i>
          </el-form-item>
          <el-form-item label="授权类型">
            <span id="" class="span">*</span>
            <el-radio-group v-model="form.sqClassValue">
              <el-radio label="独占许可使用" @change=hangdelalter></el-radio>
              <el-radio label="排他许可使用" @change=hangdelalter>排他许可使用</el-radio>
              <el-radio label="普通许可使用" @change=hangdelalter></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="授权区域">
            <span id="" class="span">*</span>
            <el-radio-group v-model="locat">
              <el-radio v-for="item in sqQy"   :key="item.id" :label="item.value" @change='hangdleClick'></el-radio>
            </el-radio-group>
            <div  id="total-city" v-show="sqQy[1].show" style="margin-bottom: 20px;" >
              <el-checkbox :indeterminate="currentCites.TOTAL.isIndeterminate" v-model="currentCites.TOTAL.checkAll"  @change="handleCheckAllChange3">全选</el-checkbox>
              <div id="" class="total-city-rig">
                <el-checkbox :indeterminate="currentCites.Dl.isIndeterminate" v-model="currentCites.Dl.checkAll"  @change="handleCheckAllChange">大陆地区</el-checkbox>
                <el-checkbox :indeterminate="currentCites.GAT.isIndeterminate" v-model="currentCites.GAT.checkAll" @change="handleCheckAllChange1">港澳台地区</el-checkbox>
              </div>
              <div id="total-xian"></div>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="currentCites.Dl.checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in currentCites.Dl.cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group v-model="currentCites.GAT.checkedCities" @change="handleCheckedCitiesChange1">
                <el-checkbox v-for="city in currentCites.GAT.cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-input type="textarea" style="margin-top:10px ;" v-model="form.changeListRemark" placeholder="如有与授权区域相关的细节，请在此处填写，以最大化保护您的权益。"></el-input>
          </el-form-item>
          <!-- tiem -->
          <el-form-item label="授权期限">
            <span id="" class="span">*</span>
            <el-date-picker
              v-model="form.starDate"
              type="date"
              placeholder="选择日期时间">
            </el-date-picker>
            <span class="demonstration">至</span>
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
            <!-- 备注  -->
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.remark" placeholder="如有于该授权相关的细节信息，请在此处填写"></el-input>
            <div id="">
              <div id="" style="position: relative;">
                <div id="" class="mes-bm">
                  <span  class="icon-bm  icon2-bm"></span> 信息保密设置
                  <span  class="icon-bm  icon1-bm"></span>
                </div>
              </div>
              <div id="" class="mes-check-wrp">
                <h3 class="mes-mm-check">您需要隐藏的信息（选择后，该信息在“扫码终端页-授权信息”中不显示，不对消费者公开。）</h3>
                <div>
                  <el-checkbox-group v-model="checkedEmpower">
                    <el-checkbox v-for='item in poweres' :label="item.value" :key='item.id'></el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </el-form-item>
          <!-- 智能码定价   v-model="form.price"-->
          <el-form-item label="授权码定价" name="znmpro">
            <span style="margin:0 0 0 26px" class="span"></span>
            <div style="display: flex; position: relative;top: -24px; left: 0;">
                <div @click="handclick(0)"  class="new-ma xxx">
                  <div ></div>
                  <span>猪猪侠智能码</span>
                </div>
                <div  @click="handclick(1)" class="new-ma xxx">
                  <div></div>
                  <span>猪猪侠智能码</span>
                </div>
                <div  @click="handclick(2)"  class="new-ma xxx">
                  <div ></div>
                  <span>猪猪侠智能码</span>
                </div>
            </div>
            <div style="display: flex; position: relative;top: 0px; left: 36px;">
              <input class="inp" v-model="form.price" type="text" placeholder="请输入授权金额"/>
              <span style="width: 620px;padding: 0 0 0 20px;">设置价格后，被授权商申请码时将以该价格进行支付，若未设置，被授权商将以实际价格支付。</span>
            </div>
          </el-form-item>
          <!-- 授权金 -->
          <el-form-item label="授权金">
            <span style="margin:0 0 0 26px" class="span"></span>
            <input class="inp" v-model="form.payMoney" type="text" placeholder="请输入授权金额"/>
          </el-form-item>
          <el-form-item>
            <span style="margin:0 0 0 26px" class="span"></span>
            <el-button type="primary" @click="handleNext">下一步</el-button>
            <el-button>保存至授权列表</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import UserHeader from '../../common/UserHeader'
var gatcities = ['香港特别行政区', '澳门特别行政区', '台湾']
var cityOptions = ['北京市', '天津市', '重庆市', '上海市', '河北省', '山西省', '辽宁省 ', '吉林省', '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '海南省', '四川省', '贵州省', '云南省', '陕西省', '甘肃省', '青海省', '内蒙古自治区', '广西壮族自治区', '宁夏回族自治区', '新疆维吾尔自治区']
var strip = '请选择授权IP'
var strbsq = '请选择被授权商'
var strsqly = '请选择授权领域'
const strHeaders = window.sessionStorage.getItem('token')
export default {
  name: 'Newpwor',
  components: {
    UserHeader
  },
  data () {
    return {
      handleClass: 1,
      starDate: '', // 授权开始时间
      endDate: '', // 授权结束时间
      locat: '',
      merchantId: '',
      sqLy: [{
        value: '',
        valueMess: ''
      }],
      currentbsqList: '', // 被授权权商
      currentsqList: '', // 授权ip列表
      currentsqLy: '', // 授权领域
      poweres: [],
      checkedEmpower: [],
      isIndeterminate: true,
      currentCites: {
        Dl: {
          cities: cityOptions,
          checkAll: false,
          checkedCities: [],
          isIndeterminate: false
        },
        GAT: {
          cities: gatcities,
          checkAll: false,
          checkedCities: [],
          isIndeterminate: false
        },
        TOTAL: {
          checkAll: false,
          isIndeterminate: false
        }
      },
      sqQy: [{
        id: 1,
        show: true,
        value: '全球'
      }, {
        id: 2,
        show: false,
        value: '中国（含港澳台地区)'
      }, {
        id: 4,
        show: false,
        value: '海外'
      }],
      form: {
        sqIp: '',
        bsqIp: '',
        merchantName: '',
        sqClassValue: '',
        ownerType: '',
        sqQyValue: '',
        starDate: '',
        endDate: '',
        delivery: false,
        sqClass: '',
        changeListRemark: '',
        infoSet: '',
        remark: '',
        checkcites: '',
        price: '',
        payMoney: '',
        quYuType: '',
        opusIdList: '',
        quYu: ''
      }
    }
  },
  watch: {
    'form.sqIp': {
      handler () {
        if (this.form.sqIp === strip) {
          this.form.bsqIp = ''
          this.form.sqLy = ''
          this.currentbsqList = ''
          this.currentsqLy = ''
        }
      }
    },
    'form.bsqIp': {
      handler () {
        if (this.form.bsqIp === strbsq) {
          this.form.sqLy = ''
          this.currentsqLy = ''
        }
      }
    }
  },
  methods: {
    hangdleClick (val) {
      this.sqQy.forEach(item => {
        if (item.value === val) {
          item.show = true
        } else {
          item.show = false
        }
      })
    },
    hangdelalter (value) {
    },
    handleCheckAllChange (val) {
      this.currentCites.Dl.checkedCities = val ? cityOptions : []
      this.currentCites.Dl.isIndeterminate = false
      this.currentCites.TOTAL.isIndeterminate = val
      if (val && this.currentCites.GAT.checkAll) {
        this.currentCites.TOTAL.isIndeterminate = !val
        this.currentCites.TOTAL.checkAll = val
      } else if (val === false && this.currentCites.GAT.checkAll === false) {
        this.currentCites.TOTAL.isIndeterminate = false
        this.currentCites.TOTAL.checkAll = false
      } else if (val === false && this.currentCites.GAT.checkAll) {
        this.currentCites.TOTAL.isIndeterminate = true
      }
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.currentCites.Dl.checkAll = checkedCount === this.currentCites.Dl.cities.length
      this.currentCites.TOTAL.isIndeterminate = this.currentCites.Dl.isIndeterminate = checkedCount > 0 && checkedCount < this.currentCites.Dl.cities.length
    },
    handleCheckAllChange1 (val) {
      this.currentCites.GAT.checkedCities = val ? gatcities : []
      this.currentCites.GAT.isIndeterminate = false
      this.currentCites.TOTAL.isIndeterminate = val
      if (val && this.currentCites.Dl.checkAll) {
        this.currentCites.TOTAL.isIndeterminate = !val
        this.currentCites.TOTAL.checkAll = val
      } else if (val === false && this.currentCites.Dl.checkAll === false) {
        this.currentCites.TOTAL.isIndeterminate = false
        this.currentCites.TOTAL.checkAll = false
      } else if (val === false && this.currentCites.Dl.checkAll) {
        this.currentCites.TOTAL.isIndeterminate = true
      }
    },
    handleCheckedCitiesChange1 (value) {
      let checkedCount = value.length
      this.currentCites.GAT.checkAll = checkedCount === this.currentCites.GAT.cities.length
      this.currentCites.TOTAL.isIndeterminate = this.currentCites.GAT.isIndeterminate = checkedCount > 0 && checkedCount < this.currentCites.GAT.cities.length
    },
    handleCheckAllChange3 (val) {
      this.handleCheckAllChange(val)
      this.handleCheckAllChange1(val)
      this.currentCites.Dl.checkAll = val
      this.currentCites.GAT.checkAll = val
      this.currentCites.TOTAL.isIndeterminate = false
    },
    handclick (val) {
      var div = document.getElementsByClassName('xxx')
      for (let i = 0; i < div.length; i++) {
        if (val === i) {
          div[i].classList.add('click')
        } else {
          div[i].classList.remove('click')
        }
      }
    },
    resetData (tiem, val) {
      let d = new Date(tiem)
      var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      if (val === 'starDate') {
        this.starDate = youWant
      } else if (val === 'endDate') {
        this.endDate = youWant
      }
    },
    getsqList () {
      axios.get('/api/smi-opus/list', {
        headers: {
          'accept': '*/*',
          'Authorization': strHeaders
        }
      }).then(res => {
        this.currentsqList = res.data
      })
    },
    getbsqList () {
      axios.get('/api/smi-code-merchant/listBySelect', {
        headers: {
          'accept': '*/*',
          'Authorization': strHeaders
        }
      }).then(res => {
        this.currentbsqList = res.data
      })
    },
    getbsqLy () {
      axios.get('/api/smi-field/list', {
        headers: {
          'accept': '*/*',
          'Authorization': strHeaders
        }
      }).then(res => {
        this.currentsqLy = res.data
      })
    },
    getInfosetList () {
      axios.get('/api/smi-info-set/public/list', {
        headers: {
          'accept': '*/*',
          'Authorization': strHeaders
        }
      }).then(res => {
        this.poweres = res.data
      })
    },
    setMerchantId () {
      for (let i = 0; i < this.currentbsqList.length; i++) {
        if (this.currentbsqList[i].merchantName === this.form.bsqIp) {
          this.merchantId = this.currentbsqList[i].merchantId
        }
      }
    },
    setInfoSet () {
      var sum = ''
      for (let i = 0; i < this.checkedEmpower.length; i++) {
        this.poweres.forEach(item => {
          if (item.value === this.checkedEmpower[i]) {
            sum += item.id + ','
          }
        })
      }
      this.form.infoSet = sum
    },
    setMerchantName () {
      var t = this.currentbsqList.every(item => {
        var sign = item.merchantName !== this.form.bsqIp
        return sign
      })
      if (t) {
        this.form.merchantName = this.form.bsqIp
      }
    },
    setgatQuYu () {
      this.form.gatQuYu = this.currentCites.GAT.checkedCities.join(',') + ','
    },
    setownerType () {
      if (this.form.sqClassValue === '独占许可使用') {
        this.form.ownerType = 1
      } else if (this.form.sqClassValue === '排他许可使用') {
        this.form.ownerType = 2
      } else if (this.form.sqClassValue === '普通许可使用') {
        this.form.ownerType = 3
      }
    },
    setfieldList () {
      let cloum = ''
      let sq = this.sqLy
      for (let i = 0; i < sq.length; i++) {
        cloum += sq[i].value
        if (sq[i].valueMess) {
          cloum += '@' + sq[i].valueMess + ','
        } else {
          cloum += ','
        }
      }
      this.form.fieldList = cloum
    },
    setQuYuType () {
      this.sqQy.forEach(item => {
        switch (this.locat) {
          case this.sqQy[0].value :
            this.form.quYuType = this.sqQy[0].id
            break
          case this.sqQy[1].value :
            this.form.quYuType = this.sqQy[1].id
            break
          case this.sqQy[2].value :
            this.form.quYuType = this.sqQy[2].id
            break
        }
      })
    },
    setOpusIdList () {
      let mark = ''
      let tar = this.form.sqIp
      this.currentsqList.forEach(item => {
        if (item.opusName === tar) {
          mark = ',' + item.opusId + '/' + item.type
        }
      })
      this.form.opusIdList = mark
      console.log(this.form.opusIdList)
    },
    setquYu () {
      let sum = this.currentCites.Dl.checkedCities
      sum = sum.join(',')
      this.form.quYu = sum
    },
    handleNext () {
      if (!this.form.sqIp || this.form.sqIp === strip) {
        this.$message(strip)
        return
      } else if (!this.form.bsqIp || this.form.sbqIp === strbsq) {
        this.$message(strbsq)
        return
      } else if (this.sqLy.every(item => {
        return !item.value || item.value === strsqly
      })) {
        this.$message(strsqly)
        return
      } else if (!this.form.sqClassValue) {
        this.$message('请选择授权类型')
        return
      } else if (!this.locat) {
        this.$message('请输入授权区域')
        return
      } else if (!this.form.starDate || !this.form.endDate) {
        this.$message('选择日期')
        return
      }
      this.setMerchantId()
      this.resetData(this.form.starDate, 'starDate')
      this.setfieldList()
      this.setgatQuYu()
      this.setInfoSet()
      this.setMerchantName()
      this.setquYu()
      this.setOpusIdList()
      this.setQuYuType()
      this.resetData(this.form.endDate, 'endDate')
      this.setownerType()

      var par = {
        changeListRemark: this.form.changeListRemark,
        endDate: this.endDate,
        fieldList: this.form.fieldList,
        gatQuYu: this.form.gatQuYu,
        infoSet: this.form.infoSet,
        merchantId: this.merchantId,
        merchantName: this.form.merchantName,
        opusIdList: this.form.opusIdList,
        ownerType: this.form.ownerType,
        payMoney: this.form.payMoney,
        price: this.form.price,
        quYu: this.form.quYu,
        quYuType: this.form.quYuType,
        remark: this.form.remark,
        startDate: this.starDate
      }
      console.log(par)
      axios({
        url: '/api/smi-code-opus-change/saveCodeOpusChange',
        method: 'post',
        headers: {
          'accept': '*/*',
          'Authorization': strHeaders
        },
        params: par,
        paramsSerializer: function (params) {
          return Qs.stringify(params, {arrayFormat: 'brackets'})
        }
      }).then(res => {
        var t = 'http://192.168.0.134:8080/applyCode/newAddGoodInfo.do' + '?'
        var strarr = []
        for (let i in res.data) {
          strarr.push(i)
        }
        for (let i = 0; i < strarr.length; i++) {
          t += strarr[i] + '=' + res.data[strarr[i]] + '&'
        }
        location.href = t
      })
    },
    handleChangebsqList (val) {
      if (val === strbsq) {
        this.form.bsqIp = ''
        this.clearSqly()
      } else if (val === strip) {
        this.clearSqly()
      }
    },
    clearSqly () {
      for (var i = 0; i < this.sqLy.length; i++) {
        this.sqLy[i].value = ''
      }
    },
    handleRed (index) {
      this.sqLy.splice(index, 1)
    },
    setToken () {
      var qs = ''
      // 保存数据的对象
      var args = {}
      var items = null
      var item = null
      var name = null
      var value = null
      // 在 for 循环中使用
      var len = items.length
      // 逐个将每一项添加到 args 对象中
      qs = (location.search.length > 0 ? location.search.substring(1) : '')
      items = qs.length ? qs.split('&') : []
      for (let i = 0; i < len; i++) {
        item = items[i].split('=')
        name = decodeURIComponent(item[0])
        value = decodeURIComponent(item[1])
        if (name.length) {
          args[name] = value
        }
      }
      console.log(args)
      window.sessionStorage.setItem('token', args)
      return args
    }
  },
  beforeMount () {
    this.setToken()
  },
  mounted () {
    var _this = this
    _this.getInfosetList()
    console.log(document.getElementsByClassName('g')[0])
    // 第一个g  授权ip下拉框 g是div的class 点击是向服务器请求  授权ip
    document.getElementsByClassName('g')[0].addEventListener('click', function () {
      _this.getsqList()
    })
    // 第2个g  被授权商 下拉框 g是div的class 满足条件时 点击是向服务器请求  被授权商列表
    console.log(document.getElementsByClassName('g')[1])
    document.getElementsByClassName('g')[1].addEventListener('click', function () {
      let getLi = document.querySelector('li.g0')
      if (_this.form.sqIp) {
        if (_this.form.sqIp !== strip) {
          getLi.innerText = strbsq
          _this.getbsqList()
        } else {
          _this.$message(strip)
        }
      } else {
        _this.$message(strip)
        getLi.innerText = strip
      }
    })
    document.getElementsByClassName('g')[2].addEventListener('click', function () {
      let getLi = document.querySelector('li.g1')
      console.log(_this.currentsqLy)
      // 授权IP和 授权商有填没
      if (_this.form.sqIp) {
        if (_this.form.sqIp === strip) {
          if (_this.form.bsqIp) {
            if (_this.form.bsqIp === strbsq) {
              _this.$message('请选择授权IP和被授权商')
              getLi.innerText = '请选择授权IP和被授权商'
            } else {
              _this.$message(strip)
              getLi.innerText = strip
            }
          } else {
            _this.$message('请选择授权IP和被授权商')
            getLi.innerText = '请选择授权IP和被授权商'
            if (_this.form.bsqIp) {

            } else {
              _this.$message('请选择授权IP和被授权商')
              getLi.innerText = '请选择授权IP和被授权商'
            }
          }
        } else {
          if (_this.form.bsqIp && _this.form.bsqIp !== strbsq) {
            _this.getbsqLy()
            getLi.innerText = '请选择授领域'
          } else {
            _this.$message(strbsq)
            getLi.innerText = strbsq
          }
        }
        // 是否 填有 被授权商
      } else {
        if (_this.form.bsqIp) {
          if (_this.form.bsqIp === strbsq) {
            _this.$message('请选择授权IP和被授权商')
            getLi.innerText = '请选择授权IP和被授权商'
          } else {
            getLi.innerText = strip
            _this.$message(strip)
          }
        } else {
          _this.$message('请选择授权IP和被授权商')
          getLi.innerText = '请选择授权IP和被授权商'
        }
      }
    })
    document.querySelector('label.power-are').addEventListener('click', () => {
      var length = this.sqLy.length - 1
      if (!this.form.sqIp || this.form.sqIp === strip) {
        this.$message(strip)
      } else if (!this.form.bsqIp || this.form.bsqIp === strbsq) {
        this.$message(strbsq)
      } else if (!this.sqLy[length].value || this.sqLy[length].value === strsqly) {
        this.$message(strsqly)
      } else if (this.form.sqIp && this.form.sqIp !== strip && this.form.bsqIp && this.form.bsqIp !== strbsq && this.sqLy[length].value && this.sqLy[length].value !== strsqly) {
        this.sqLy.push({value: '', valueMess: ''})
        console.log(this.sqLy[0].value)
        console.log(this.sqLy[0].valueMess)
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.newpower-cont
  width: 1180px
  min-height: 1px
  margin: 0 auto
  margin-top: 100px
  background-color: white
  .newpower-from-wrp
    padding: 70px
    .newempower
      font-size: 16
      font-weight:300
      padding:0 0 16px 0px
    .el-form
      background-color:white
      .el-form-item
        .el-form-item__label
          text-align:left!import
        .el-form-item__content
          .el-input__inner
            .el-col-11
              width:50%
          .inp
            -webkit-appearance: none
            background-color: #FFF
            background-image: none
            border-radius: 4px
            border: 1px solid #DCDFE6
            -webkit-box-sizing: border-box
            box-sizing: border-box
            color: #606266
            display: inline-block
            font-size: inherit
            height: 40px
            line-height: 40px
            outline: 0
            padding: 0 15px
            width: 217px
          .newpower-lab
            padding:0 16px
            color:#6699CC
            position absolute
            top 0
            left 264px
            z-index 1
          .el-textarea
            left:36px
            width:83.66%
          .mes-bm
            text-align:center
            border: 1px solid #DCDFE6
            border-bottom:none
            position:relative;
            display:inline-block
            top:14px;
            left: 36px;
            height: 30px;
            line-height: 30px;
            padding:0 10px;
            .icon-bm
              display: inline-block;
              width:14px;
              height: 14px;
              line-height: 25px
            .icon1-bm
              background:url("../../assets/img/newpower_icon_1.png") 4px 4px no-repeat;
            .icon2-bm
              background:url("../../assets/img/newpower_icon_0.png") 0px 0px no-repeat;
          .mes-check-wrp
            border: 1px solid #DCDFE6
            display: inline-block;
            padding: 0 20px;
            position: relative;
            top: 7px;
            left: 36px;
            .mes-mm-check
              font-size:12px
              font-weight:500
        .span
          color:red
          display:inline-block
          padding:0 6px 0 0px
          margin:0 0 0 20px
        .demonstration
          padding:0 4px
        .po-icon
          position absolute
          top 6px
          right  13rem
          font-size 24px
        .el-input__inner
          border:1px solid #999
          border-radius:0
        .power-are
          -webkit-appearance: none
          background-color: #FFF
          background-image: none
          border-radius: 4px
          border: 1px solid #DCDFE6
          -webkit-box-sizing: border-box
          box-sizing: border-box
          color: #606266
          display: inline-block
          font-size: inherit
          height: 40px
          line-height: 40px
          outline: 0
          padding: 0 15px
          width: 118px
        .newpower-label
          height: 40px
          line-height: 40px
          background-color: #FFF
          padding: 0 14px;
          font-size: 14px;
          border-radius: 4px;
          background-color: #fff;
          margin-right: 10px;
          float: left;
          position: absolute;
          top: 0;
          border:1px solid #999
          left: 274px;
          border-radius: 4px;
          border: 1px solid #DCDFE6
          width: 436px;
        #total-city
          position:relative
          top:2px
          left:35px
          width:786px
          height:auto
          background-color: #FFF
          font-size: 14px;
          border-radius: 4px;
          background-color: #fff;
          float: left;
          border:1px solid #999
          border-radius: 4px;
          border: 1px solid #DCDFE6;
          margin:0;
          padding:10px
          .total-city-rig
            position: relative;
            display:inline-block
            top:0;
            right:-490px;
          #total-xian
            height: 1px;
            background-color:#dcdfe6;
            width: 100%
            margin: 0 auto;
        .bsqList
          border: 1px solid #DCDFE6;
          position:absolute
          top 49px
          left 281px
          z-index -100
          background-color white
          width: 143px
          height: 200px
          overflow-y auto
          li
            padding 0 5px 0 20px
            &:hover
              background-color :#F5F7FA
        .new-ma
          display inline-block
          height 40px
          border: 1px solid #DCDFE6;
          margin 0 10px 0  36px
          width 136px
          div
            float left
            background rgba(242, 242, 242, 1);
            background url(../../assets/img/indexlogin-sign_03.png)
            width 2.5rem
            height 100%
          span
            padding 0 10px
            white-space nowrap
        .click
          border #3161FF solid 1px
</style>
<style>
.newpower-cont .newpower-from-wrp .el-form-item[name="znmpro"]::after{
content: '';
display: block;
clear: both;
}
</style>
